<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <a href="list.html">返回</a>
    <h2>编辑用户</h2>
    <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="form.password" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="form.status">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="角色">
            <el-select v-model="form.role">
                <el-option label="管理员" value="ADMIN"></el-option>
                <el-option label="普通用户" value="USER"></el-option>
                <el-option label="商家" value="MERCHANT"></el-option>
                <el-option label="配送员" value="DELIVERY"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    id: '',
                    username: '',
                    password: '',
                    email: '',
                    address: '',
                    status: '',
                    role: ''
                }
            }
        },
        created() {
            // 获取 URL 中的 id 参数
            const urlParams = new URLSearchParams(window.location.search);
            this.form.id = urlParams.get('id');

            // 根据 id 获取用户信息
            axios.get('/user/get_user?id=' + this.form.id)
                .then(response => {
                    this.form.username = response.data.username;
                    this.form.password = response.data.password;
                    this.form.email = response.data.email;
                    this.form.status = response.data.status;
                    this.form.address = response.data.address;
                    this.form.role = response.data.role;
                })
                .catch(error => {
                    console.log(error);
                });
        },
        methods: {
            submit() {
                axios.put('/user/update?id=' + this.form.id, this.form)
                    .then(response => {
                        if (response.data === 'true'){
                            this.$message.success('修改成功');
                            window.location.href = 'list.html';
                        } else {
                            this.$message.error('修改失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$message.error('修改失败');
                    });
            }
        }
    })
</script>
</body>
</html>